<template>
  <div>
    <div class="herdertop">
      <img src="../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>商圈管理</el-breadcrumb-item>
        <el-breadcrumb-item>商圈列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center">
      <div class="search">
        <div class="demo-input-suffix cityinput">
          城市
          <el-select v-model="value" @change="busstwo" placeholder="请选择">
            <el-option
              v-for="item in obtainList"
              :key="item.cityCode"
              :label="item.cityName"
              :value="item.cityCode"
            >
            </el-option>
          </el-select>
        </div>
        <div class="demo-input-suffix">
          商圈
          <el-select v-model="value1" placeholder="请选择">
            <el-option
              v-for="item in business"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
        <!--  账号状态搜索信息 -->
        <div style="margin-left:25px">
          <el-button
            style="background-color:#fd804c;color: #fff;"
            @click.native.prevent="isSelect"
            >查询</el-button
          >
          <el-button type="warning" @click.native.prevent="isEmpty"
            >清空</el-button
          >
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="businessAreaCode" label="商圈ID">
        </el-table-column>
        <el-table-column prop="businessAreaName" label="商圈名称">
        </el-table-column>
        <el-table-column prop="cityName" label="城市"> </el-table-column>
        <el-table-column prop="businessArea" label="商圈范围">
          <template slot-scope="scope">
            <div>{{ scope.row.businessArea }} 平方米</div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" width="280" label="最近一次修改时间">
        </el-table-column>
        <el-table-column prop="updater" label="操作人"> </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >点击修改</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div class="block">
        <div class="left"></div>
        <div class="right">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            class="page"
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-size="pageSize"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obtainList: [],
      tableData: [],
      pageIndex: 1,
      pageSize: 20,
      business: [],
      value: "",
      value1: "",
      total: 0,
      cityCode: "",
      cityName: ""
    };
  },
  activated() {
    this.DetailByPage();
    this.obtain();
  },
  methods: {
    isSelect() {
      (this.pageIndex = 1), (this.pageSize = 20), this.DetailByPage();
    },

    isEmpty() {
      (this.pageIndex = 1),
        (this.pageSize = 20),
        (this.value = ""),
        (this.value1 = ""),
        (this.total = 0),
        (this.totalobtainList = []),
        (this.business = []),
        (this.cityCode = ""),
        (this.cityName = "");

      this.DetailByPage();
    },

    businessList() {
      this.$http({
        url:
          "hsssystemadmin/v1/businessManagement/getBusinessNameList?cityCode=" +
          this.cityCode,
        method: "get"
      }).then(res => {
        //console.log(res);
        this.business = res.data;
      });
    },
    DetailByPage() {
      this.$http({
        url: "hsssystemadmin/v1/businessManagement/getBusinessDetailByPage",
        method: "POST",
        data: {
          businessAreaName: this.value1,
          cityCode: this.cityCode,
          page: this.pageIndex,
          size: this.pageSize
        }
      }).then(res => {
        this.tableData = res.data.list;
        this.total = parseInt(res.data.total);
      });
    },
    //   修改
    handleClick(e) {
      this.$router.push({
        path: "/homeTwo",
        query: {
          id: e.businessAreaCode,
          cityName: e.cityName,
          cityCode: e.cityCode
        }
      });
    },
    // 城市
    obtain() {
      this.$http({
        url: "/hsssystemadmin/v1/businessManagement/getCityList",
        method: "get"
      }).then(res => {
        this.obtainList = res.data;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.DetailByPage();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.DetailByPage();
    },
    // 选择商圈
    buss(e) {
      this.value1 = e;
      //console.log(this.value1)
      this.pageIndex = 1;
    },
    // 更换
    busstwo(val) {
      //console.log(val);
      if (!!val) {
        let obj = {};
        obj = this.obtainList.find(item => {
          return item.cityCode === val;
        });
        if (obj != undefined) {
          this.cityName = obj.cityName;
          this.cityCode = obj.cityCode;
        } else {
          this.cityCode = "";
          this.cityName = "";
        }

        this.pageIndex = 1;
        this.businessList();
      }
    }
  }
};
</script>
<style scoped>
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.search {
  margin-left: 18px;
  margin-bottom: 15px;
}
.topImg {
  margin-right: 20px;
}
.cityinput {
  margin-right: 30px;
}
.block {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
}
.left {
  font-size: 15px;
}
</style>
